<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>eSearch - 帮助</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="supported-color-schemes" content="light dark">
    <link rel="stylesheet" type="text/css" href="css/root.css">
    <link rel="stylesheet" type="text/css" href="css/help.css">
</head>

<body>
    <main spellcheck="false">
        <a href="" id="language"></a>
        <article>
            <h1>快速开始</h1>
            <p>运行<strong>eSearch</strong>。按下<kbd>Alt</kbd>+<kbd>C</kbd>或<kbd>⌥</kbd><kbd>C</kbd>即可进行截屏。当然也可以右键点击托盘处的图标，点击“截屏搜索”进行截屏。
            </p>
            <p>此时默认<strong>框选全屏</strong>。</p>
            <p>按下鼠标并拖动，画出框，即可框选你想要的区域。</p>
            <p>鼠标旁边有一个“工具栏”，你可以点击按钮进行<a href="#文字识别"><img src="./assets/icons/ocr.svg" class="icon">文字识别</a>、<img
                    src="./assets/icons/search.svg" class="icon">以图搜图、<img src="./assets/icons/scan.svg"
                    class="icon">扫描二维码、<img src="./assets/icons/draw.svg" class="icon">图像编辑、<img
                    src="./assets/icons/open.svg" class="icon">其他应用打开、<img src="./assets/icons/ding.svg"
                    class="icon">固定（ding）在屏幕上、<img src="./assets/icons/record.svg" class="icon">录屏、<img
                    src="./assets/icons/long_clip.svg" class="icon">长截屏、<img src="./assets/icons/copy.svg"
                    class="icon">复制图片到剪贴板、<img src="./assets/icons/save.svg" class="icon">保存和<img
                    src="./assets/icons/close.svg" class="icon">取消截屏搜索</p>
            <p>进行<img src="./assets/icons/ocr.svg" class="icon">文字识别</a>或<img src="./assets/icons/scan.svg"
                    class="icon">扫描二维码后，产生的文字信息将在主页面展示。你可以在<a href="#主页面">主页面</a>进行各种文字编辑，并进行<img
                    src="./assets/icons/search.svg" class="icon">搜索和 <img src="./assets/icons/translate.svg"
                    class="icon">翻译。</p>
        </article>
        <article>
            <h1>详细功能</h1>


            <h2 id="托盘">托盘</h2>
            <p>一般操作系统的托盘位于屏幕右上角或右下角，<strong>eSearch</strong>首次运行时，会在托盘出显示图标<img src="./assets/icon.svg" class="icon"
                    style="filter: none;">。
            </p>
            <p>左键点击托盘图标，进行截屏搜索。</p>
            <p>右键点击托盘按钮，它会弹出几个选项：</p>

            <h3 id="自动识别">自动识别</h3>
            <p>如果你选中了屏幕上的某些文字，<strong>eSearch</strong>将直接搜索它，否则开启文字识别识别屏幕文字。</p>

            <h3 id="截屏搜索">截屏搜索</h3>
            <p>识别框选的屏幕内容进行搜索，也可以进行编辑、保存等操作。</p>

            <h3 id="选中搜索">选中搜索</h3>
            <p>搜索你选中的文字，即划词搜索。</p>

            <h3 id="剪贴板搜索">剪贴板搜索</h3>
            <p>搜索最近复制的文字。</p>


            <h2 id="截屏界面">截屏界面</h2>

            <h3 id="选区">选区</h3>
            <p>默认设置下，与截屏前显示一样的、鲜艳的色彩区域为选区，选区外则是灰暗的。初始截屏默认全屏选区，这意味着选中了整个屏幕，屏幕没有灰暗处。</p>
            <p>除了<img src="./assets/icons/draw.svg" class="icon">图像编辑外的操作都限于选区内。</p>
            <p>在某个位置按下鼠标左键，将在此处生成一个选区，拖动光标，选区也随之改变。释放鼠标左键，选区将不再随鼠标变化。</p>
            <p>光标位于选区边缘或选区中间时，光标会改变形状，提示可以拖动。你可以向窗口一样，通过拖动改变选区大小、位置。</p>
            <h4>自动框选</h4>
            <p>利用 OpenCV 进行图像边缘识别，视觉上重要的选区（图标、文字、导航栏等）可能被识别。光标悬停在某些选区内，他们会自动框出，点击，即可框选该选区。</p>
            <p>高级设置中的最小阈值和最大阈值是边缘识别算法的参数，你若觉得自动框选不准确，并有相关的知识，可以进行修改。<a
                    href="https://docs.opencv.org/4.x/d7/de1/tutorial_js_canny.html">参考</a></p>

            <h3 id="大小栏">大小栏</h3>
            <p>大小栏位于选区上方。分别以像素为单位显示
            <pre>选区左上角x坐标, 选区左上角y坐标 选区右下角x坐标, 选区右下角y坐标 选区长×选区宽</pre>等数字。</p>
            <p>大小栏的数字可编辑，光标点击你想更改的数字，改变后按下回车键<kbd>↵</kbd>，即可把数字应用到选区。注意部分数字会随其他数字的改变而改变。</p>

            <h3 id="鼠标栏">鼠标栏</h3>
            <p>鼠标栏一直跟随着光标，从上到下依次显示放大镜、坐标、颜色代码。</p>
            <h4>放大镜</h4>
            <p>放大镜是由若干色块组成的色彩阵，反映了光标位置下屏幕放大后的效果，每个色块都有与之对应的屏幕像素。处于正中间的色块是光标对应屏幕所在位置，他的坐标显示在下面的坐标区。</p>
            <p>若色块有灰色边框，整体偏暗，还有些透明，说明它对应的屏幕像素在选区外。</p>
            <p>通过放大镜，你可以清除知道光标所在位置，可以更精确进行操作。</p>
            <h4>颜色代码</h4>
            <p>展示了光标所在像素的颜色代码，不同的代码格式可以在设置中选择，目前支持：HEX、RGB、HSL、HSV和CMYK格式的代码。</p>
            <h4>更多</h4>
            <p>右击，鼠标栏将收起放大器，展开颜色代码（所有格式代码，可点击复制），显示选区大小。再次右击可收起。</p>

            <h3 id="工具栏">工具栏</h3>
            <p>展示主要功能按钮。</p>
            <p>若设置了“框选后默认操作”，对应的功能按钮背景将加深。若想临时取消操作，请用鼠标中键（即滚轮）点击按钮。</p>
            <p>工具栏会在完成选区框选后自动移动到选区旁。你可以在设置选择展示内容优先或效率优先。</p>
            <h4>展示内容优先</h4>
            <p>例如：若工具栏将要移动选区左侧，但超出了屏幕，他会移动到选区右侧。若右侧也超出了屏幕，工具栏只能在工具栏左侧内。这种模式最大程度保证工具栏不会遮挡选区，但有可能光标要跨过一个选区点击按钮，效率不高。
            </p>
            <h4>效率优先</h4>
            <p>例如：若工具栏将要移动选区左侧，但超出了屏幕，他会移动到选区左侧内，尽管遮挡了选区内容。这种模式保证工具栏尽可能靠近光标，便于提升效率，但它遮挡了选区内容。</p>
            <h4>移动</h4>
            <p>右键按住工具栏任意位置，即可通过拖动改变工具栏位置。</p>

            <h3 id="侧栏">侧栏</h3>
            <p>按下<kbd>Z</kbd>键，侧栏将会在屏幕左侧弹出。再次按下<kbd>Z</kbd>键，或点击右上角的<img src="./assets/icons/close.svg"
                    class="icon">收回侧栏。</p>

            <h3 id="保存">保存</h3>
            <p>按下保存按钮，将弹出提示框来选择文件格式。目前支持PNG、JPG和SVG格式。</p>
            <p>SVG格式是一种可编辑矢量格式，但保存到文件里的截屏是栅格格式，只有图像编辑产生的形状（除了滤镜外）是矢量格式，便于后期修改。</p>


            <h2 id="图像编辑"><img src="./assets/icons/draw.svg" class="icon">图像编辑</h2>

            <h3 id="元素">元素</h3>
            <p>元素包括笔迹、形状、文字、滤镜等。点击或通过光标拖拉以此选中元素。元素（除了滤镜）被选中后可拖动中间部分来移动，或拖动八个方向的拖块来改变大小，还可以拖动最顶部的拖块来旋转。所有元素都可以通过按下<kbd>Delete</kbd>键来删除。
            </p>

            <h3 id="自由绘画">自由绘画</h3>
            <p>有画笔、橡皮和喷刷。画笔阴影可以为笔迹添加阴影，使画笔拥有荧光笔性质。</p>

            <h3 id="形状">形状</h3>
            <h4>线条、圆和矩形</h4>
            <p>像框选选区一样，选择相应形状后，按下左键并拖动，以此添加形状。</p>
            <h4>折线和多边形</h4>
            <p>选择形状后，在你想要的起始位置点击，然后依次点击下一个点来画线，最后在终点双击即可结束画图。多边形会自动闭合形状，例如五边形你只需画四条线。</p>
            <h4>文字</h4>
            <p>在你想要的位置点击即可生成文本框。</p>


            <h3 id="滤镜">滤镜</h3>
            <p>点击添加滤镜按钮，拖拉出矩形滤镜区域，后面的滤镜操作都在这上面发生。几个滤镜区域叠加在一起，效果只取决于最上层的滤镜区域。滤镜区域可以添加多个滤镜效果，滤镜效果可以叠加。</p>


            <h3 id="颜色和大小">颜色和大小</h3>
            <h4>颜色代码区</h4>
            <p>上面为填充颜色，下面为边框颜色，默认聚焦填充颜色。支持输入CSS颜色，支持透明度，透明度与不透明度区同步。</p>
            <h4>不透明度区</h4>
            <p>上面为填充不透明度，下面为边框不透明度。不透明度100%，意味着完全不透明。与颜色代码区透明度同步，但颜色代码区文字会转化为HEXA格式。</p>
            <h4>色盘</h4>
            <p>点击颜色，颜色将适用到颜色代码区聚焦位置。原先的不透明度将重设为100%。右击该颜色，色盘将显示相同色系的更多颜色。再次右击回到主色盘。</p>
            <h4>高级属性编辑</h4>
            <p>点击后，弹出输入框，可通过JS语言和fabricjs.api进行操控。下面会输出返回值。</p>


            <h3 id="层次">层次</h3>
            <p>选择形状、文字、滤镜等元素后，可通过按钮改变他们的层叠顺序。注意，选择元素后，他在视觉上会自动移动到最顶层，实际位置以不选中元素时的位置为准。</p>

            <h3 id="操作">操作</h3>
            <p>支持撤销、重做、复制和删除四种操作，复制和删除只针对画布上的元素。撤销和重做针对画布和框选。</p>

            <h4>时间线模式撤销</h4>
            <p>任何编辑历史都不会在撤销或重做过程丢失，而是以时间为顺序记录当前状态。下面的字母只是比喻。</p>
            <table>
                <tr>
                    <td>假设你的编辑过程</td>
                    <td>A => AB => <strong>ABC</strong></td>
                </tr>
                <tr>
                    <td>撤销</td>
                    <td>A => <strong>AB</strong> => ABC</td>
                </tr>
                <tr>
                    <td>在“AB”基础上编辑，如添加D</td>
                    <td>A => AB => ABC => AB => <strong>ABD</strong></td>
                </tr>
            </table>

            <h4>撤销&重做</h4>
            <p>撤销是恢复到当下之前的状态，可以看成回到过去。重做是在撤销后恢复到之后的状态，可以看成回到现在。</p>
            <table>
                <tr>
                    <td>假设你的编辑过程</td>
                    <td>A => AB => <strong>ABC</strong></td>
                </tr>
                <tr>
                    <td>撤销</td>
                    <td>A => <strong>AB</strong> => ABC</td>
                </tr>
                <tr>
                    <td>再次撤销</td>
                    <td><strong>A</strong> => AB => ABC</td>
                </tr>
                <tr>
                    <td>重做</td>
                    <td>A => <strong>AB</strong> => ABC</td>
                </tr>
            </table>
            <h4>复制</h4>
            <p>相当于电脑中的“复制（拷贝）+粘贴”或macOS系统中的“复制”。将会生成画布元素的副本在旁边，你可以在设置调节副本相对蓝本的位置。</p>
            <h4>删除</h4>
            <p>选中元素后，进行删除，把他们移除画布。</p>

            <h3 id="插件">插件</h3>
            <p>为了让大家接触最多的截屏界面高度自定义，同时尽可能减少学习成本，软件提供了一个简单的插件功能。</p>
            <p>插件文件由js文件或css文件组成。</p>
            <p>你可以在<a href="https://esearch.vercel.app/plugin.html">官网下载</a>已有的插件。可以通过提交<a
                    href="https://github.com/xushengfeng/eSearch/issues">issue</a>来申请功能。目前仅限于截屏界面。</p>
            <p>你可以查看源代码，以此自己写插件。</p>


            <h2 id="OCR"><img src="./assets/icons/ocr.svg" class="icon">文字识别（OCR）</h2>
            <p>文字识别可以把框选的图片的文字转化为可编辑的文字在主页面显示。</p>
            <p><strong>eSearch</strong>提供了<strong>离线OCR</strong>和其他<strong>在线OCR</strong>，可以在<a
                    href="setting.html#OCR类型">设置</a>中选择。也可以点击按钮右上角的圆点切换。</p>
            <p>结果将在<a href="#主页面">主页面</a>展示。</p>

            <h3 id="离线OCR">离线OCR</h3>
            <p>离线OCR完全免费，不依赖网络，但它体积较大。部分在线OCR可以免费体验，但它速度快，准确率高，不占体积。<strong>eSearch</strong>默认启用离线OCR。</p>
            <p>若想添加自己训练的模型或其他语种的模型，请将其转换为onnx格式，并将检测模型（文件名包含det）、识别模型（文件名包含rec）、字典文件一起选中，拖拽进设置的<a
                    href="setting.html#离线OCR模型">离线OCR设置项</a>中。</p>

            <h3 id="在线OCR">在线OCR</h3>
            <p><strong>eSearch</strong>目前支持的在线OCR服务是<strong>百度OCR</strong>和<strong>有道OCR</strong>。</p>
            <h4>百度OCR</h4>
            <p>参考<a href="https://cloud.baidu.com/doc/OCR/s/dk3iqnq51">百度OCR的教程</a>，获取 API Key 和 Secret
                Key，并填入<a href="setting.html#baidu_details">设置</a>中。截止2022年1月，百度OCR还可以免费领取服务。</p>
            <h4>有道OCR</h4>
            <p>参考<a
                    href="https://ai.youdao.com/doc.s#guide">有道AI文档</a>，在创建应用时服务选择<i>光学字符识别服务-通用文字识别</i>，接入方式为<i>API</i>，获取应用ID和密钥，并填入<a
                    href="setting.html#youdao_details">设置</a>中。</p>


            <h2 id="以图搜图"><img src="./assets/icons/search.svg" class="icon">以图搜图</h2>
            <p>以图搜图可以把你选中的图片，通过互联网引擎进行搜索，并通过浏览器展示引擎的搜索结果。</p>
            <p>可以在设置选择引擎，也可以点击按钮右上角的圆点切换。</p>


            <h2 id="扫描二维码"><img src="./assets/icons/scan.svg" class="icon">扫描二维码</h2>
            <p>结果将在<a href="#主页面">主页面</a>展示。</p>

            <h2 id="录屏"><img src="./assets/icons/record.svg" class="icon">录屏</h2>
            <p>按下按钮后，软件会先提醒你选择保存位置，然后打开录制栏。</p>
            <h3>录制栏</h3>
            <p>初始化完毕后，录制栏按钮变的可用。录制栏提供基本操作，开启或停止录制，暂停或继续录制，若你的电脑插入了摄像头或麦克风，将显示有关按钮。按住中间显示的时间区域可拖动录制栏。还有最小化和关闭按钮。</p>
            <p>开启或停止录制的快捷键是<kbd>Win</kbd>+<kbd>R</kbd>，开始录制后，录制按钮变成方形，表示已开始录制。录制途中你可以自由开关摄像头或麦克风（前提是他们可用）。请记住，凡是麦克风和摄像头，都应该当成开着的，我不能100%保证摄像头或麦克风完全关闭，有一个系统级开关甚至物理开关是最好的。目前暂不支持录制时再次进行录制。
            </p>
            <p>录制结束后，将显示编辑（转换）模式，你可以预览、裁切、转换格式、编辑帧率和码率。编辑完成后按下保存键完成，否则视为放弃。你可以在设置开启自动转换，这样就不需要每次都编辑了。</p>

            <h2 id="长截屏"><img src="./assets/icons/long_clip.svg" class="icon">长截屏</h2>
            <p>即滚动截屏。</p>
            <p>框选并按下长截屏按钮后，屏幕将绘制框选框，此时通过鼠标滚轮滚动内容来确定截屏范围。滚动完后，点击右下角红点以结束截屏。此时编辑界面会弹出，耐心等待些许时间，拼接好的长屏将展示。
            </p>

            <h2 id="主页面"><img src="./assets/icons/main.svg" class="icon">主页面</h2>
            <p>当你按下 <img src="./assets/icons/ocr.svg" class="icon">文字识别或 <img src="./assets/icons/scan.svg"
                    class="icon">扫描二维码后，若识别成功，<strong>eSearch</strong>将弹出主页面。
            </p>

            <h3 id="搜索和翻译">搜索和翻译</h3>
            <p>按下按钮，<strong>eSearch</strong>将对全文进行相应的搜索或翻译操作。如果不想搜索或翻译全文，可以用鼠标选区部分文字，这样可以搜索或翻译部分文字。</p>

            <h3 id="编辑栏">编辑栏</h3>
            <p>选中时，文字旁边弹出一个编辑栏。</p>
            <p>你可以进行<img src="./assets/icons/link.svg" class="icon">打开链接、<img src="./assets/icons/search.svg"
                    class="icon">搜索、<img src="./assets/icons/translate.svg" class="icon">翻译等操作。
            </p>

            <h3 id="自动删除换行">自动删除换行</h3>
            <p>OCR识别后，可能不保留排版，而是产生多余的换行，使用自动删除换行，可以识别多余换行并删除。</p>

            <h3 id="历史记录">历史记录</h3>
            <p>点击历史记录，可以查看之前在主页面的文字记录。手动编辑后的文字不会自动保存到历史记录，除非你按下保存到历史记录按钮。</p>


            <h2 id="引擎"><img src="./assets/icons/search.svg" class="icon">引擎</h2>
            <p>引擎包括ocr引擎、以图搜图引擎、搜索引擎和翻译引擎。</p>

            <h3 id="默认引擎">默认引擎</h3>
            <p>选定一个默认引擎，点击相关识别搜索按钮后会调用该引擎。</p>

            <h3 id="切换引擎">切换引擎</h3>
            <p>点击ocr引擎、以图搜图引擎按钮右上方圆点处可展开引擎选择。</p>
            <p>点击搜索引擎和翻译引擎按钮右边下拉框可展开引擎选择。</p>
            <p>选择引擎后，操作将使用选择的引擎。</p>

            <h3 id="记住上次引擎选择">记住上次引擎选择</h3>
            <p>勾选此项后，默认展示的引擎不再是之前选择的默认引擎，取而代之的是上次使用过的引擎。</p>
            <p>此时引擎仍然可以改变选择，使用改变的引擎后，将记录下来，用作下一次引擎的展示。</p>

            <h3 id="自定义搜索和翻译引擎">自定义搜索和翻译引擎</h3>
            <p>“搜索”或“翻译”的引擎是可以更改甚至在<a href="setting.html#搜索引擎">设置</a>中自定义
                常用引擎推荐（不一定好用，请根据自身选择合适引擎）：</p>
            <pre>
搜索引擎:
Google, https://www.google.com/search?q=%s
百度, https://www.baidu.com/s?wd=%s
必应, https://cn.bing.com/search?q=%s
Yandex, https://yandex.com/search/?text=%s
搜狗, https://www.sogou.com/web?query=%s
夸克, https://quark.sm.cn/s?q=%s
神马, https://yz.m.sm.cn/s?q=%s
微信, https://weixin.sogou.com/weixin?type=2&query=%s
知乎, https://www.zhihu.com/search?type=content&q=%s
微博, https://s.weibo.com/weibo?q=%s
github, https://github.com/search?q=%s
bilibili, https://search.bilibili.com/all?keyword=%s
优酷, https://so.youku.com/search_video/q_%s
腾讯, https://v.qq.com/x/search/?q=%s
爱奇艺, https://so.iqiyi.com/so/q_%s

翻译引擎:
翻译树, https://fanyishu.netlify.app/?text=%s
Google, https://translate.google.com.hk/?op=translate&text=%s
Deepl, https://www.deepl.com/translator#any/any/%s
金山词霸, http://www.iciba.com/word?w=%s
百度, https://fanyi.baidu.com/#auto/auto/%s
腾讯, https://fanyi.qq.com/?text=%s
            </pre>


            <h2 id="搜索窗口"><img src="./assets/icons/browser.svg" class="icon">搜索窗口</h2>
            <p>搜索窗口是<strong>eSearch</strong>自带的一个简单的浏览器，在主页面上生成。</p>
            <p>若设置了浏览器中打开，搜索的链接将在系统默认的浏览器打开，否则，将在搜索窗口打开。</p>

            <h3 id="标签页管理">标签页管理</h3>
            <p>在标签页中打开链接，他可能在新标签页中打开。新标签页建立在右侧。当标签页过多时，他们不会变短，而是让整个标签页区域可滚动。令其向上滚动，他将向右滚动。如果你的鼠标或触摸板支持横向滚动，那他的滚动正常。
            </p>
            <p>标签页可使用关闭按钮、鼠标中键或鼠标右键关闭，关闭后将展示左边的标签页。所有标签页关闭后，搜索窗口将关闭。</p>

            <h3 id="保存到历史记录">保存到历史记录</h3>
            <p>搜索窗口不支持历史记录。如果你搜索到重要的内容，可以点击添加到历史记录，此时浏览的标签页网址将保存到主要历史记录，可在主页面查看。</p>

            <h3 id="浏览器打开">浏览器打开</h3>
            <p>即使你打开了搜索窗口，你仍然可以通过浏览器打开按钮在浏览器打开当前标签页的网址。在设置中勾选是否在浏览器打开后自动关闭标签页。</p>


            <h2 id="ding"><img src="./assets/icons/ding.svg" class="icon">ding</h2>
            <p>截屏界面按下 <img src="./assets/icons/ding.svg" class="icon">固定（ding）在屏幕上后，选取的区域将变成一个窗口放在屏幕上。</p>
            <p>鼠标按住可拖动窗口，滚轮滚动可进行缩放。鼠标放在窗口上，顶部弹出工具栏。</p>
            <p>可以改变窗口透明度和大小，可以最小化、<a href="#归位">归位</a>和关闭。</p>

            <h3 id="归位">归位</h3>
            <p>归位可以让窗口回到最开始位置和大小，于原来截屏位置贴合以至于无法察觉。</p>

            <h3 id="dock">dock</h3>
            <p>在屏幕左上角会常驻竖向条形的提示条，点击它，可以展开dock栏，进行ding窗口最小化还原或关闭。</p>

            <h2 id="设置">设置</h2>

            <h3 id="放弃保存设置">放弃保存设置</h3>
            <p>若在某次设置中不清楚错误设置了什么，请选中右下角放弃保存设置按钮，随后关闭设置即可。</p>

            <h3 id="代理">代理</h3>
            <p>固定服务器模式下，可分别设定https、http、ftp、socks代理，在相应框选填入服务器URL即可。可填入多个URL，使用逗号分开。</p>

        </article>

    </main>
    <script src="help/help.ts" type="module"></script>
</body>

</html>
